<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"  />
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/common.css"  />
    <link rel="stylesheet" href="/assets/home/css/subject.css"  />
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
    
    <title>视频搜索</title>
</head>

<body>
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search search wow">
        <input type="search" placeholder="请输入课程名称" name="search" />
    </div>

    <!-- 课程列表 -->
    <div id="box" class="mescroll">
        <div class="list">
        </div>
    </div>

    <script>localStorage.setItem("menu",1)</script>
    {include file='common/footer'/}
</body>
</html>
<script>
    var keyword = ''
    $("input[name='search']").change(function(){
        keyword = $(this).val()
        downCallback()
    })
    
    var mescroll = new MeScroll("box", {
        down: {
            callback: downCallback
        },
        up: {
            callback: upCallback,
            isBounce: false, 
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop: {
                src: "/assets/home/plugin/mescroll/mescroll-totop.png",
                offset: 100,
                duration: 300,
                supportTap : true,
            },
            empty: {
                warpId:	"box",
                tip: "暂无相关数据~"
            },
        }
    });

    function downCallback() {
        $('#box .list').empty()
        mescroll.resetUpScroll()
    }

    function upCallback(page) 
    {
        $('.mescroll-totop').css('bottom','70px')
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/course',{pageNum,pageSize,keyword})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            mescroll.endByPage(curPageData.length, totalPage);
            
            if(page.num == 1) $('#box .list').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            mescroll.endErr();
        })
    }

    function setListData(curPageData){
        teamHtml = ''
        for(var [i,data] of curPageData.entries()){
            // console.log(data)
            teamHtml += `<div class="item wow" data-wow-delay="100ms">
                <a href="/home/course/details?id=${data.id}">
                    <div class="avatar">
                        <img src="${data.thumbs_text}" alt="">
                    </div>
                    <div class="info">
                        <h5 class="title">${data.title}</h5>
                        <p class="type">课程分类：${data.category.name}</p>
                        <p class="teacher">授课老师：${data.teacher.name}</p>
                        <p class="time">创建时间：${data.date}</p>
                        <div class="like">
                            <div class="left">
                                <img src="/assets/home/images/thumbs-up.png" alt="">
                                <span>${data.likes_num}</span>
                            </div>

                            <span class="price">￥${data.price}</span>
                        </div>
                    </div>
                </a>
            </div>`
        }
        $('#box .list').append(teamHtml)
    }
    
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: "#box" // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>